<!DOCTYPE html>
<html>
<meta charset="UTF-8">

<head>
<script src="../lib/jquery/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
	href="../lib/jq-console-master/css/ansi.css" />
<script src="../lib/jq-console-master/lib/jqconsole.js"
	type="text/javascript"></script>
<script src="../lib/wcnmd/wcnmd-core.js" type="text/javascript"></script>



<script type="text/javascript" src="../lib/spin.min.js"></script>
<style type="text/css"></style>

<style>
html, body {
	color: white;
	font-family: monospace;
	margin: 0;
	padding: 0;
}

#console {
	height: 650px;
	width: 100%;
	position: relative;
	background-color: black;
	border: 0px solid #CCC;
	margin: 0 auto;
	margin-top: 0px;
}

.jqconsole {
	padding: 10px;
	padding-bottom: 10px;
}

.jqconsole-cursor {
	background-color: #999;
}

.jqconsole-blurred .jqconsole-cursor {
	background-color: #666;
}

.jqconsole-prompt {
	color: #0d0;
}

.jqconsole-old-prompt {
	color: #0b0;
	font-weight: normal;
}

.jqconsole-input {
	color: #dd0;
}

.jqconsole-old-input {
	color: #bb0;
	font-weight: normal;
}

.brace {
	color: #00FFFF;
}

.paran {
	color: #FF00FF;
}

.bracket {
	color: #FFFF00;
}

.jqconsole-composition {
	background-color: red;
}
</style>

<style type="text/css">
#loading {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0);
	z-index: 999999;
	top: 0;
	left: 0;
}

#loading .loaded {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#loading .loaded .load {
	position: absolute;
	width: 30px;
	height: 30px;
	background: url(Loading4.gif) no-repeat;
	background-size: 30px 30px;
	left: 50%;
	margin-left: -30px;
	top: 50%;
	margin-top: -30px;
}
</style>
</head>
<body>

	<div id="console"></div>
	<div id='loading' style="display:none;">
		<div class='loaded'>
			<div class='load'></div>
		</div>
	</div>

	<script type="text/javascript">
		var wcnmd = new Wcnmd();
	</script>

	<script>
		propStartingWith = function(obj, prefix) {
			var res = [];
			for (var i = 0; i < obj.length; i++) {
				if (obj[i].indexOf(prefix) === 0) {
					res.push(obj[i]);
				}
			}
	
			return res;
		};
	
	
	
	
		$(function() {
			// Creating the console.
			var header = '欢迎使用!\n';
			var jqconsole = $('#console').jqconsole(header, '');
	
			writeToConsole = function(str) {
				jqconsole.Write(str);
	
			};
			jqconsole.RegisterShortcut('R', function() {
				//清空的时候，记得加上prompt
				this.Reset();
				jqconsole.Write(result.data);
			});
			// Abort prompt on Ctrl+Z.
			jqconsole.RegisterShortcut('Z', function() {
				jqconsole.AbortPrompt();
				handler();
			});
			// Move to line start Ctrl+A.
			jqconsole.RegisterShortcut('A', function() {
				jqconsole.MoveToStart();
				handler();
			});
			// Move to line end Ctrl+E.
			jqconsole.RegisterShortcut('E', function() {
				jqconsole.MoveToEnd();
				handler();
			});
			jqconsole.RegisterMatching('{', '}', 'brace');
			jqconsole.RegisterMatching('(', ')', 'paran');
			jqconsole.RegisterMatching('[', ']', 'bracket');
			// Handle a command.
			var handler = function(command) {
	
	
				if (command || command == "") {
					//先获取token				
					var token = parent.$("#connectToken").val();
					wcnmd.execCmd(command, token, function(result) {
						if (result.success) {
							jqconsole.SetPromptLabel("");
							jqconsole.SetPromptText('');
	
							jqconsole.Write(result.data);
	
						}
					});
				}
	
	
				jqconsole.Prompt(true, handler, function(command) {
	
	
					return false;
				});
			};
	
			jqconsole.SetKeyPressHandler(function(e) {
				var text = jqconsole.GetPromptText() + String.fromCharCode(e.which);
	
				if (text == " ") {
					//先获取token
					var token = parent.$("#connectToken").val();
					wcnmd.execCmd(" ", token, function(result) {
						if (result.success) {
							jqconsole.SetPromptLabel("");
							jqconsole.SetPromptText('');
							jqconsole.Write(result.data);
	
						}
					});
	
				}
	
	
				var commondSet = new Array();
				commondSet.push("configure terminal");
				commondSet.push("help");
				commondSet.push("exit");
				commondSet.push("quit");
				commondSet.push("show run");
	
				var props = propStartingWith(commondSet, text);
				if (props.length) {
					if (!$('.suggest').length) {
						$('<div/>').addClass('suggest').appendTo($('.jqconsole'));
					}
					$('.suggest').empty().show();
					props.forEach(function(prop) {
						$('.suggest').append('<div>' + prop + '</div>');
					});
					var pos = $('.jqconsole-cursor').offset();
					pos.left += 20;
					$('.suggest').offset(pos);
				} else {
					$('.suggest').hide();
				}
			});
	
			jqconsole.SetControlKeyHandler(function(e) {
				$('.suggest').hide();
				if (e.which === 9 && $('.suggest div').length) {
					jqconsole.SetPromptText($('.suggest div').first().text());
					return false;
				}
			});
	
			handler();
		});
	</script>

	<script type="text/javascript">
		function showLoading() {
			document.getElementById("loading").style.display = "block";
		}
		showLoading();
	</script>
</body>
</html>
